import Empty from '@/components/Empty';
import Tabs, { TabsProps } from '@/components/Tabs';
import React, { useState } from 'react';
import HistoryData from './components/HistoryData';
import RealtimeMonitor from './components/RealtimeMonitor';
import Tree from './components/Tree';
import Style from './index.less';

const LCMonitor: React.FC = () => {
  const [tabKey, setTabKey] = useState('1');
  const [deviceType, setType] = useState('');
  const [deviceCode, setdeviceCode] = useState('');
  const [isEmpty, setisEmpty] = useState(false);

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '实时监控',
    },
    {
      key: '2',
      label: '历史信息',
    },
  ];
  const handleClickTree = (res: any) => {
    if (res !== null) {
      setisEmpty(false);
      setType(res.deviceType);
      setdeviceCode(res.deviceCode);
    } else {
      setisEmpty(true);
    }
  };
  return (
    <>
      <div>
        <Tabs
          items={items}
          onChange={(key) => {
            setTabKey(key);
          }}
          style={{ paddingBottom: 0 }}
        ></Tabs>
        {isEmpty ? (
          <div className={Style.isEmpty} style={{ paddingBottom: 30 }}>
            <Empty></Empty>
          </div>
        ) : (
          <div className={Style.contentWrap}>
            <div className={Style.left}>
              <Tree handleClick={handleClickTree}></Tree>
            </div>
            <div className={Style.right} style={tabKey === '2' ? { paddingBottom: 0 } : {}}>
              <div className={Style.right_center}>
                {tabKey === '1' && (
                  <RealtimeMonitor tabIndex={deviceType} deviceCode={deviceCode} />
                )}
                {tabKey === '2' && <HistoryData tabIndex={deviceType} deviceCode={deviceCode} />}
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
};

export default LCMonitor;
